<template>
    <fieldset>
        <legend>秒针</legend>
        <h1>雨一夜深深沉默的秒针冥冥中给我轻轻感应这共振</h1>
        <h1>雨一夜阵阵停落的秒针如潮浪般发生无惧冷雨风</h1>
        <h2>vuex中的name:
            <i style="color:red">{{nickname}}</i>
        </h2>
        <h2>
            getters的值：
            <i style="color:red">{{reverseN}}</i>
        </h2>
        <fieldset>
            <legend>计算器</legend>
            <button @click="SHAN">-</button>
            &nbsp;
            <b>{{num}}</b>
            &nbsp;
            <button @click="INCREASE">+</button>
        </fieldset>
    </fieldset>
</template>
<script>
//辅助函数获取state
import {mapState, mapGetters,mapMutations} from "vuex"

export default{
    //state或者getters一般会映射在组件的computed属性
    computed:{
        ...mapState(['name','age','nickname','num']),
        ...mapGetters(['reverseN'])
    },

    mounted(){
        console.log(this.$store)
        console.log(this.nickname)
    },
    methods:{
        // handleIncrease(){
        //     this.$store.commit('INCREASE','二郎')
        // },
        ...mapMutations(['INCREASE','SHAN'])
    }
}
</script>
